import type { VbenFormProps, VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { RolePage, AuthorityMenu } from './api';
import { ref, computed, h } from 'vue';

// 表格表单数据
export const formOptions: VbenFormProps = {
  schema: [
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'roleName',
      label: '角色名称',
    },
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'roleCode',
      label: '角色编码',
    },
  ],
  wrapperClass: 'grid-cols-5',
};

// 表格数据
export const gridOptions: VxeTableGridOptions = {
  columns: [
    { title: '序号', type: 'seq', width: 80 },
    { title: '角色名称', field: 'roleName', align: 'left', width: 200 },
    { title: '角色编码', field: 'roleCode', align: 'left', width: 200 },
    { title: '描述', field: 'roleDesc', align: 'left' },
    { slots: { default: 'action' }, title: '操作', width: 160 },
  ],
  minHeight: '100%',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await RolePage({
          page: page.currentPage,
          limit: page.pageSize,
          ...formValues,
        });
      },
    },
    response: {
      result: 'data.records',
      total: 'data.total',
      list: 'data.records',
    },
  },
  pagerConfig: {
    enabled: true,
    pageSize: 20,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    import: false,
    refresh: true,
    zoom: true,
  },
};

// 编辑弹窗表单配置
export const handleRoleId = ref('');
export const drawerFormSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    defaultValue: '',
    fieldName: 'roleId',
    label: '角色id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入角色名称',
      allowClear: true,
    },
    fieldName: 'roleName',
    label: '角色名称',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入角色编码',
      allowClear: true,
      disabled: computed(() => {
        return handleRoleId.value ? true : false;
      }),
    },
    fieldName: 'roleCode',
    label: '角色编码',
    rules: 'required',
  },
  {
    component: 'Textarea',
    componentProps: {
      placeholder: '请输入角色描述',
      allowClear: true,
      autosize: {
        minRows: 3,
      },
    },
    fieldName: 'roleDesc',
    label: '描述',
  },
];

//
export const AuthorityMenuList = ref([]);
export const AuthorityMenuQueryState = ref(false);
export const selectedIds = ref<string[]>([]);
// 表格数据
export const authGridOptions: VxeTableGridOptions = {
  columns: [
    {
      title: '选择',
      type: 'checkbox',
      align: 'left',
      width: 100,
      treeNode: true,
    },
    // { field: 'name', minWidth: 300, title: 'Name', treeNode: true },
    {
      title: '菜单管理',
      field: 'menuName',
      align: 'left',
      width: 160,
    },
    {
      title: '按钮权限',
      slots: { default: 'actionList' },
      align: 'left',
    },
  ],
  checkboxConfig: {
    checkField: 'isChecked',
  },
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: async ({ page }, formValues) => {
        AuthorityMenuQueryState.value = false;
        return await AuthorityMenu({});
      },
      querySuccess: async ({ response }) => {
        AuthorityMenuList.value = response.data;
        AuthorityMenuQueryState.value = true;
      },
    },
    response: {
      list: 'data',
    },
  },
  treeConfig: {
    parentField: 'parentId',
    rowField: 'menuId',
    transform: true,
    expandAll: true,
  },
  pagerConfig: {
    enabled: false,
  },
};

// 添加按钮form
export const roleFormSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    defaultValue: '',
    fieldName: 'actionId',
    label: '权限id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Input',
    defaultValue: '',
    fieldName: 'menuId',
    label: '菜单id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Input',
    defaultValue: '',
    fieldName: 'actionName',
    label: '按钮名称',
    componentProps: {
      placeholder: '请输入按钮名称',
      allowClear: true,
    },
    rules: 'required',
  },
  {
    component: 'Input',
    defaultValue: '',
    fieldName: 'actionCode',
    label: '按钮编码',
    componentProps: {
      placeholder: '请输入按钮编码',
      allowClear: true,
    },
    rules: 'required',
  },
];
